<template>
  <div class="singersort-container">
      <h1 class="hname">{{singerKinds}}</h1>
    <ul class="singerSort">
      <li v-for="item in singerSorts" :key="item.id" @click="$router.push({name:'Artists',params:{id:item.id}})">
        <a href="javascript:;">
          <img :src="item.picUrl" alt>
        </a>
        <span>{{item.name}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
// 获取歌手分类列表
import { getArtistList } from "@/api";

export default {
  data() {
    return {
      cat:"",
      singerKinds: "",
      singerSorts: []
    };
  },
  mounted() {
      this.setHname(this.$route.params.cat);
    this.getsingersort(this.$route.params.cat);
  },
  methods: {
    getsingersort(data) {
      getArtistList({ cat: data }).then(res => {
        this.singerSorts = res.data.artists;
        // console.log(this.singerSorts);
      });
    },
    setHname(data){
        // console.log(data)
        switch(data){
            case 5001 : this.singerKinds = "入驻歌手";break;
            case 1001 : this.singerKinds = "华语男歌手";break;
            case 1002 : this.singerKinds = "华语女歌手";break;
            case 1003 : this.singerKinds = "华语组合/乐队";break;
            case 2001 : this.singerKinds = "欧美男歌手";break;
            case 2002 : this.singerKinds = "欧美女歌手";break;
            case 2003 : this.singerKinds = "欧美组合/乐队";break;
            case 6001 : this.singerKinds = "日本男歌手";break;
            case 6002 : this.singerKinds = "日本女歌手";break;
            case 6003 : this.singerKinds = "日本组合/乐队";break;
            case 7001 : this.singerKinds = "韩国男歌手";break;
            case 7002 : this.singerKinds = "韩国女歌手";break;
            case 7003 : this.singerKinds = "韩国组合/乐队";break;
            case 4001 : this.singerKinds = "其他男歌手";break;
            case 4002 : this.singerKinds = "其他女歌手";break;
            case 4003 : this.singerKinds = "其他组合/乐队";break;
            default:break;
        }
    }
  }
};
</script>

<style>
.singersort-container{
      width: 1200px;
  height: 100%;
  margin: 0 auto;
  color: #333;
  overflow: hidden;
}
.hname{
  height: 50px;
  width: 750px;
  margin: 0 auto;
}
.singerSort {
  width: 750px;
  height: 100%;
  margin: 0 auto;
}
.singerSort > li {
  width: 130px;
  height: 180px;
  float: left;
  margin-right: 20px;
  margin-bottom: 20px;
  text-align: center;
}
.singerSort li a img {
  width: 100%;
  height: 80%;
  margin-bottom: 10px;
  border-radius: 5px;
}
</style>